<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成验证码图片</title>
<script src="/vendor/jquery/jquery-1.10.2.min.js"></script>

</head>
<body>
	<div style="border: 1px solid #F00; width: 200px; padding: 10px;">
		<div>
			<div>
				<input type="tel" id="verify_input" placeholder="请输入验证码" maxlength="4">
			</div>
		</div>
		<div>
			<a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码"> <img id="imgVerify"
				src="/api/code" alt="更换验证码" height="40" width="120" onclick="getVerify(this);">
			</a>
		</div>
		<input id="checkCodeButton" type="button" value="提交">
	</div>
	<script type="text/javascript">
		var img = $("#imgVerify")
		img.on("click", function() {
			img.attr('src', '/api/code?'+Math.random())
		});
		var button = $("#checkCodeButton")
		button.on("click", function() {
		 	var value =$("#verify_input").val();
		    $.ajax({
		      async: false,
		      type: 'post',
		      url: '/api/check-verify',
		      data: {
		        verifyInput: value
		      },
		      success: function (result) {
		        if (result) {
		          alert("success!");
		        } else {
		          alert("failed!");
		        }
		        img.click()
		      }
		    });
		});
	</script>

	<br/>
	<canvas id="canvas" width="120" height="40"></canvas>
	<a href="#" id="changeImg">看不清，换一张(前端实现)</a>
	<script>
		/**生成一个随机数**/
		function randomNum(min, max) {
			return Math.floor(Math.random() * (max - min) + min);
		}
		/**生成一个随机色**/
		function randomColor(min, max) {
			var r = randomNum(min, max);
			var g = randomNum(min, max);
			var b = randomNum(min, max);
			return "rgb(" + r + "," + g + "," + b + ")";
		}
		drawPic();
		document.getElementById("changeImg").onclick = function(e) {
			e.preventDefault();
			drawPic();
		}

		/**绘制验证码图片**/
		function drawPic() {
			var canvas = document.getElementById("canvas");
			var width = canvas.width;
			var height = canvas.height;
			var ctx = canvas.getContext('2d');
			ctx.textBaseline = 'bottom';

			/**绘制背景色**/
			ctx.fillStyle = randomColor(200, 255); //颜色若太深可能导致看不清
			ctx.fillRect(0, 0, width, height);
			/**绘制文字**/
			var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
			for (var i = 0; i < 4; i++) {
				var txt = str[randomNum(0, str.length)];
				ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
				ctx.font = randomNum(15, 40) + 'px SimHei'; //随机生成字体大小
				var x = 10 + i * 25;
				var y = randomNum(25, 45);
				var deg = randomNum(-45, 45);
				//修改坐标原点和旋转角度
				ctx.translate(x, y);
				ctx.rotate(deg * Math.PI / 180);
				ctx.fillText(txt, 0, 0);
				//恢复坐标原点和旋转角度
				ctx.rotate(-deg * Math.PI / 180);
				ctx.translate(-x, -y);
			}
			/**绘制干扰线**/
			for (var i = 0; i < 8; i++) {
				ctx.strokeStyle = randomColor(40, 180);
				ctx.beginPath();
				ctx.moveTo(randomNum(0, width), randomNum(0, height));
				ctx.lineTo(randomNum(0, width), randomNum(0, height));
				ctx.stroke();
			}
			/**绘制干扰点**/
			for (var i = 0; i < 100; i++) {
				ctx.fillStyle = randomColor(0, 255);
				ctx.beginPath();
				ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
				ctx.fill();
			}
		}
	</script>
</body>
</html>